<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view style="padding-bottom:120upx">
            <view @tap="goToGoodsDetails" class="goods flex-row">
                <view class="goods-pic flex-grow-0">
                    <image :src="data.goods.cover_pic"></image>
                </view>
                <view class="goods-info flex-grow-1 flex-col">
                    <view class="goods-name flex-grow-1">
                        {{data.goods.name}}
                    </view>
                    <view class="flex-grow-0">
                        <view style="font-size: 9pt;color: #888;margin-right: 20upx;display: inline-block" v-for="(item,index) in data.goods.attr" :key="index">
                            {{item.attr_group_name}}：{{item.attr_name}}
                        </view>
                    </view>
                    <view class="money flex-grow-0 flex-row flex-y-bottom ">
                        <view class="original_price flex-gorw-0">
                            ¥ {{data.goods.original_price}}
                        </view>
                        <view class="price flex-grow-0">
                            ¥ {{data.goods.pay_price}}
                        </view>
                    </view>
                </view>
                <view class="goods-right flex-grow-0 flex-y-center">
                    <image :src="data.__wxapp_img.share.right.url"></image>
                </view>
            </view>
            <view class="order">
                <view class="order-title flex-y-center">
                    订单信息
                </view>
                <view class="order-info">
                    <view class="order-info-item">
                        订单号：{{data.goods.order_no}}
                    </view>
                    <view class="order-info-item">
                        下单时间：{{data.goods.addtime}}
                    </view>
                    <view class="order-info-item" v-for="(item,index) in data.goods.orderForm" :key="index">
                        <view class="flex-row w-100 h-100" style="height:100upx;" v-if="item.type=='uploadImg'">
                            <view class="flex-grow-0 flex-y-center">{{item.key}}：</view>
                            <view class="flex-grow-1 flex-y-center">
                                <image mode="aspectFit" :src="item.value" style="width:80upx;height:80upx;"></image>
                            </view>
                        </view>
                        <block v-else>
                            {{item.key}}：{{item.value}}
                        </block>
                    </view>
                </view>
            </view>
        </view>
        <view class="btn-group flex-row">
            <view @tap="nowWriteOff" class="btn-group-item promptly flex-x-center flex-y-cneter">
                确认核销
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	require("../../../utils/helper.js");
	export default {
		data() {
			return {
				data: {
					hide: 1,
					qrcode: "",
					goods: {}
				},
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e), this.getOrderDetails(e);
    },
    onReady: function(e) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(e) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(e) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(e) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(e) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(e) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			getOrderDetails: function(e) {
        var o = "";
        if ("undefined" == typeof my) o = e.scene; else if (null !== myVue.getApp.query) {
            var t = myVue.getApp.query;
            myVue.getApp.query = null, o = t.order_id;
        }
        var n = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.clerk_order_details,
            method: "get",
            data: {
                id: o
            },
            success: function(e) {
                0 == e.code ? n.setData({
                    goods: e.data
                }) : n.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && n.getApp.core.redirectTo({
                            url: "/pages/user/user"
                        });
                    }
                });
            },
            complete: function(e) {
                setTimeout(function() {
                    myVue.getApp.core.hideLoading();
                }, 1e3);
            }
        });
    },
    goToGoodsDetails: function(e) {
        myVue.getApp.core.redirectTo({
            url: "/pages/book/details/details?id=" + this.data.goods.goods_id
        });
    },
    nowWriteOff: function(e) {
        var o = this;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "是否确认核销？",
            success: function(e) {
                e.confirm ? (myVue.getApp.core.showLoading({
                    title: "正在加载"
                }), myVue.getApp.request({
                    url: myVue.getApp.api.book.clerk,
                    data: {
                        order_id: o.data.goods.id
                    },
                    success: function(e) {
                        0 == e.code ? o.getApp.core.redirectTo({
                            url: "/pages/user/user"
                        }) : o.getApp.core.showModal({
                            title: "警告！",
                            showCancel: !1,
                            content: e.msg,
                            confirmText: "确认",
                            success: function(e) {
                                e.confirm && o.getApp.core.redirectTo({
                                    url: "/pages/index/index"
                                });
                            }
                        });
                    },
                    complete: function() {
                        o.getApp.core.hideLoading();
                    }
                })) : e.cancel;
            }
        });
    }
		},
	}
</script>

<style scoped>
.goods {
    padding: 24upx;
    background-color: #fff;
}

.goods-pic {
    margin-right: 24upx;
}

.goods-pic image {
    width: 208upx;
    height: 208upx;
}

.goods-right image {
    width: 16upx;
    height: 26upx;
}

.goods-info {
    margin-top: 10upx;
    margin-bottom: 32upx;
    margin-right: 56upx;
}

.goods-name {
    font-size: 11pt;
    color: #353535;
}

.money {
    margin-top: 20upx;
    justify-content: flex-end;
}

.original_price {
    text-decoration: line-through;
    color: #a4a4a4;
    font-size: 10pt;
}

.price {
    color: #ff4544;
    font-size: 12.5pt;
    margin-left: 24upx;
}

.shop-more image {
    width: 16upx;
    height: 26upx;
}

.shop {
    background-color: #ffffff;
    margin-bottom: 20upx;
    padding: 0 24upx;
    font-size: 11pt;
    margin-top: 20upx;
}

.shop-title {
    height: 72upx;
    font-size: 10pt;
    color: #a4a4a4;
    border-bottom: 1upx solid #e2e2e2;
}

.shop-info {
    border-bottom: 1upx solid #e2e2e2;
    padding: 30upx 0;
}

.shop-name {
    margin-bottom: 20upx;
    color: #353535;
}

.shop-addres,.shop-time {
    color: #999999;
}

.all-shop {
    color: #00a0e9;
    height: 80upx;
}

.order {
    background-color: #fff;
    padding: 0 24upx;
    margin-top: 24upx;
}

.order-title {
    font-size: 10pt;
    color: #a4a4a4;
    height: 72upx;
    border-bottom: 1upx solid #e2e2e2;
    margin-bottom: 30upx;
}

.order-info {
    font-size: 11pt;
    color: #353535;
    line-height: 1.5;
}

.order-info-item {
    padding-bottom: 16upx;
}

.btn-group {
    border-top: 1upx solid #e2e2e2;
    padding: 24upx;
    justify-content: flex-end;
    background-color: #fff;
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
}

.btn-group-item {
    font-size: 30upx;
    height: 60upx;
    width: 180upx;
    border-radius: 30upx;
    margin-left: 16upx;
    line-height: 60upx;
}

.btn-group-item.apply {
    border: 1upx solid #c9c9c9;
    color: #666666;
    background-color: #fff;
}

.btn-group-item.promptly {
    border: 1upx solid #ff4545;
    color: #ff4544;
    background-color: #fff5f5;
}

.hide {
    display: none;
}

.modal {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}
</style>
